import React, { lazy, Suspense } from "react";
import { Redirect } from "react-router-dom";
import HomeLayout from "../layouts/HomeLayout";

const SuspenseComponent = Component => props => {
  return (
    <Suspense fallback={null}>
      <Component {...props}/>
    </Suspense>
  )
};

const Home = lazy(() => import("../views/Home/"));
const Example = lazy(() => import("../views/Example/"));

export default [
  {
    path: "/",
    component: HomeLayout,
    routes: [
      {
        path: "/",
        exact: true,
        render: () => <Redirect to={"/home"} />
      },
      {
        path: "/home",
        component: SuspenseComponent(Home),
      },
      {
        path: "/example",
        exact: true,
        component: SuspenseComponent(Example),
        key: "example",
      }
    ]
  },
  {
    path: "/test",
    exact: true,
    key: "test",
    component: SuspenseComponent(lazy(() => import("../views/Test/")))
  }
];
